<template>
	<el-row id="rankingView" :gutter="20" class="mt-20">
		<KeywordSearch :searchUserCount="searchUserCount" :searches="searches"></KeywordSearch>
		<SalesByCategory :classification="classification"></SalesByCategory>
	</el-row>
</template>
<script>
import KeywordSearch from './../KeywordSearch/index';
import SalesByCategory from './../SalesByCategory/index';

export default {
	name: 'rankingView',
	components: {
		KeywordSearch,
		SalesByCategory,
	},
	data() {
		return {
			searchUserCount: {
				title: [
					{
						text: '搜索用户数',
						textStyle: {
							color: '#999',
							fontSize: 14,
						},
						top: 0,
					},
					{
						text: '97,587',
						textStyle: {
							color: '#333',
							fontSize: 22,
							fontWeight: 500,
						},
						top: 20,
					},
				],
				grid: {
					top: 10,
					bottom: 0,
					left: 0,
					right: 0,
				},
				tooltip: {},
				xAxis: {
					type: 'category',
					show: false, // 隐藏x
					boundaryGap: false, // 去除边距
				},
				yAxis: {
					show: false, // 隐藏y
				},
				// 单个图标展示样式
				series: {
					type: 'line',
					data: [100, 80, 100, 120, 90, 150, 100, 120, 90, 100],
					areaStyle: {
						// 面积
						color: 'rgba(95,187,255,.5)',
					},
					lineStyle: {
						color: 'rgb(95,187,255)',
					},
					itemStyle: {
						// 去掉小点
						opacity: 0,
					},
					smooth: true, // 平滑展示面积
				},
			},
			searches: {
				title: [
					{
						text: '搜索量',
						textStyle: {
							color: '#999',
							fontSize: 14,
						},
						top: 0,
					},
					{
						text: '187,838',
						textStyle: {
							color: '#333',
							fontSize: 22,
							fontWeight: 500,
						},
						top: 20,
					},
				],
				grid: {
					top: 10,
					bottom: 0,
					left: 0,
					right: 0,
				},
				tooltip: {},
				xAxis: {
					type: 'category',
					show: false, // 隐藏x
					boundaryGap: false, // 去除边距
				},
				yAxis: {
					show: false, // 隐藏y
				},
				// 单个图标展示样式
				series: {
					type: 'line',
					data: [80, 120, 100, 120, 90, 190, 100, 120, 90, 80],
					areaStyle: {
						// 面积
						color: 'rgba(95,187,255,.5)',
					},
					lineStyle: {
						color: 'rgb(95,187,255)',
					},
					itemStyle: {
						// 去掉小点
						opacity: 0,
					},
					smooth: true, // 平滑展示面积
				},
			},
			classification: {
				title: [
					{
						text: '品牌分布',
						textStyle: {
							fontSize: 14,
							color: '#666',
						},
						left: 20,
						top: 20,
					},
					{
						text: '累计订单量',
						subtext: 10000,
						x: '34.5%',
						y: '42.5%',
						textStyle: {
							fontSize: 14,
							color: '#999',
						},
						subtextStyle: {
							fontSize: 28,
							color: '#333',
						},
						textAlign: 'center',
					},
				],

				tooltip: {
					formatter: function(params) {
						const str = params.seriesName + '<br />' + params.marker + params.data.name + '<br />' + '数量：' + params.data.value + '<br />' + '占比：' + params.data.percent + '%';
						return str;
					},
				},
				legend: {
					type: 'scroll', //超出滚动
					orient: 'vertical', // 方向
					height: 250,
					left: '80%',
					top: 'middle',
					textStyle: {
						color: '#8c8c8c',
					},
				},
				series: {
					name: '分类',
					type: 'pie',
					center: ['35%', '50%'], // 内半径、外半径
					radius: ['45%', '60%'],
					data: [
						{ value: 535, name: '一季度', percent: '40' },
						{ value: 510, name: '二季度', percent: '10' },
						{ value: 634, name: '三季度', percent: '25' },
						{ value: 735, name: '四季度', percent: '25' },
					],
					label: {
						normal: {
							show: true,
							position: 'outter',
							formatter: function(params) {
								return params.data.name;
							},
						},
					},
					labelLine: {
						normal: {
							length: 20, // 线段1长度
							length2: 20, // 线段1长度
							smooth: true, // 平滑
						},
					},
					clockwise: false, // 饼图的扇区是否是顺时针排布, 默认true
					itemStyle: {
						borderWidth: 4,
						borderColor: '#fff',
					},
				},
			},
		};
	},
	methods: {},
};
</script>
<style lang="scss" scoped>
.mt-20 {
	margin-top: 20px;
}
</style>
<style lang="scss">
#rankingView {
	.el-card__header {
		font-size: 14px;
		color: #333;
	}
	.card-right {
		height: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
</style>
